<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <!-- Header Fragment -->
    <header th:fragment="header" class="header">
        <div class="container">
            <div class="header-content">
                <!-- Logo -->
                <div class="logo">
                    <a href="/" th:href="@{/}">
                        <i class="fas fa-shield-alt"></i>
                        <span>ANTI-DRONE STORE</span>
                    </a>
                </div>
                
                <!-- Navigation -->
                <nav class="nav-menu">
                    <ul>
                        <li><a href="/" th:href="@{/}">HOME</a></li>
                        <li><a href="/products" th:href="@{/products}">PRODUCTS</a></li>
                        <li><a href="/contact" th:href="@{/contact}">CONTACT</a></li>
                    </ul>
                </nav>
                
                <!-- Header Actions -->
                <div class="header-actions">
                    <!-- Language Selector -->
                    <div class="language-selector">
                        <button class="language-btn" id="languageBtn">
                            <i class="fas fa-globe"></i>
                            <span class="current-lang">EN</span>
                            <i class="fas fa-chevron-down"></i>
                        </button>
                        <div class="language-dropdown" id="languageDropdown">
                            <a href="#" class="language-option" data-lang="en">
                                <span class="flag">🇺🇸</span>
                                <span>English</span>
                            </a>
                            <a href="#" class="language-option" data-lang="zh">
                                <span class="flag">🇨🇳</span>
                                <span>中文</span>
                            </a>
                            <a href="#" class="language-option" data-lang="ja">
                                <span class="flag">🇯🇵</span>
                                <span>日本語</span>
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- Mobile Menu Toggle -->
                <button class="mobile-menu-toggle" id="mobileMenuToggle">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
            </div>
        </div>
        
        <!-- Mobile Menu -->
        <div class="mobile-menu" id="mobileMenu">
            <div class="mobile-menu-content">
                <ul>
                    <li><a href="/" th:href="@{/}">HOME</a></li>
                    <li><a href="/products" th:href="@{/products}">PRODUCTS</a></li>
                    <li><a href="/contact" th:href="@{/contact}">CONTACT</a></li>
                </ul>
                <div class="mobile-language">
                    <h4>Language</h4>
                    <div class="mobile-language-options" id="languageDropdown2">
                        <a href="#" class="language-option" data-lang="en">🇺🇸 English</a>
                        <a href="#" class="language-option" data-lang="zh">🇨🇳 中文</a>
                        <a href="#" class="language-option" data-lang="ja">🇯🇵 日本語</a>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Header Styles Fragment -->
    <style th:fragment="header-styles">
        /* Header Styles */
        .header {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid rgba(30, 58, 138, 0.2);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            padding: 0;
            transition: all 0.3s ease;
        }
        
        .header.scrolled {
            background: rgba(255, 255, 255, 0.98);
            border-bottom-color: rgba(30, 58, 138, 0.4);
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }
        
        .logo a {
            display: flex;
            align-items: center;
            color: #1e3a8a;
            text-decoration: none;
            font-size: 1.5rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            transition: all 0.3s ease;
        }
        
        .logo i {
            margin-right: 10px;
            font-size: 1.8rem;
        }
        
        .logo a:hover {
            color: #3b82f6;
            text-shadow: 0 0 20px rgba(30, 58, 138, 0.5);
        }
        
        .nav-menu ul {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
            gap: 40px;
        }
        
        .nav-menu a {
            color: #666666;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 10px 0;
            position: relative;
            transition: all 0.3s ease;
        }
        
        .nav-menu a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, #1e3a8a, #3b82f6);
            transition: width 0.3s ease;
        }
        
        .nav-menu a:hover {
            color: #1e3a8a;
        }
        
        .nav-menu a:hover::after {
            width: 100%;
        }
        
        .header-actions {
            display: flex;
            align-items: center;
            gap: 25px;
        }
        
        /* Language Selector */
        .language-selector {
            position: relative;
        }
        
        .language-btn {
            background: rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(30, 58, 138, 0.3);
            color: #666666;
            padding: 8px 15px;
            border-radius: 25px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .language-btn:hover {
            background: rgba(30, 58, 138, 0.1);
            border-color: #1e3a8a;
            color: #1e3a8a;
        }
        
        .language-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(30, 58, 138, 0.3);
            border-radius: 10px;
            padding: 10px 0;
            min-width: 150px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s ease;
            margin-top: 10px;
        }
        
        .language-dropdown.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        
        .language-option {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 15px;
            color: #666666;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .language-option:hover {
            background: rgba(30, 58, 138, 0.1);
            color: #1e3a8a;
        }
        
        .flag {
            font-size: 1.2rem;
        }
        
        /* Cart Icon */
        .cart-icon {
            position: relative;
            color: #666666;
            font-size: 1.3rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .cart-icon:hover {
            color: #1e3a8a;
            transform: scale(1.1);
        }
        
        .cart-count {
            position: absolute;
            top: -8px;
            right: -8px;
            background: #1e3a8a;
            color: #fff;
            font-size: 0.7rem;
            font-weight: 700;
            padding: 2px 6px;
            border-radius: 50%;
            min-width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* Mobile Menu */
        .mobile-menu-toggle {
            display: none;
            flex-direction: column;
            background: none;
            border: none;
            cursor: pointer;
            padding: 5px;
        }
        
        .mobile-menu-toggle span {
            width: 25px;
            height: 3px;
            background: #666666;
            margin: 3px 0;
            transition: 0.3s;
        }
        
        .mobile-menu-toggle.active span:nth-child(1) {
            transform: rotate(-45deg) translate(-5px, 6px);
        }
        
        .mobile-menu-toggle.active span:nth-child(2) {
            opacity: 0;
        }
        
        .mobile-menu-toggle.active span:nth-child(3) {
            transform: rotate(45deg) translate(-5px, -6px);
        }
        
        .mobile-menu {
            position: fixed;
            top: 100%;
            left: 0;
            width: 100%;
            height: calc(100vh - 70px);
            background: rgba(255, 255, 255, 0.98);
            transform: translateX(-100%);
            transition: transform 0.3s ease;
            overflow-y: auto;
        }
        
        .mobile-menu.show {
            transform: translateX(0);
        }
        
        .mobile-menu-content {
            padding: 40px 20px;
        }
        
        .mobile-menu ul {
            list-style: none;
            padding: 0;
            margin: 0 0 40px 0;
        }
        
        .mobile-menu li {
            margin: 20px 0;
        }
        
        .mobile-menu a {
            color: #666666;
            text-decoration: none;
            font-size: 1.2rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            display: block;
            padding: 15px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        
        .mobile-menu a:hover {
            color: #1e3a8a;
            padding-left: 20px;
        }
        
        .mobile-language h4 {
            color: #1e3a8a;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .mobile-language-options {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .mobile-language-options .language-option {
            padding: 10px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }




        
        /* Responsive */
        @media (max-width: 768px) {
            .nav-menu,
            .header-actions {
                display: none;
            }

            .mobile-menu-toggle {
                display: flex;
            }

            .logo a {
                font-size: 1.2rem;
            }

            .logo i {
                font-size: 1.4rem;
            }


        }
    </style>

    <div th:fragment="header-scripts">
    <!-- jQuery -->
    <script type="text/javascript"
            src="/back/scripts/jquery-2.1.0.min.js"></script>
    <!-- jQuery Configuration -->
    <script type="text/javascript"
            src="/back/scripts/simpla.jquery.configuration.js"></script>

    <link rel="stylesheet" href="/back/widget/dialog/jquery-ui.min.css"/>
    <script type="text/javascript" src="/back/widget/dialog/jquery-ui-1.9.2.custom.min.js"></script>
    <script type="application/javascript" src="/commons/js/mydialog.js"></script>


    <!-- 引入ajax -->
    <script type="text/javascript" src="/commons/js/myajax.js"></script>

    <!-- 引入store -->
    <script type="text/javascript" src="/commons/js/store.js"></script>

    <!-- Header Scripts Fragment -->
    <script>
        // Header functionality
        document.addEventListener('DOMContentLoaded', function() {
            const header = document.querySelector('.header');
            const languageBtn = document.getElementById('languageBtn');
            const languageDropdown = document.getElementById('languageDropdown');
            const mobileMenuToggle = document.getElementById('mobileMenuToggle');
            const mobileMenu = document.getElementById('mobileMenu');
            const languageOptions = document.querySelectorAll('.language-option');
            const currentLangSpan = document.querySelector('.current-lang');
            
            // Header scroll effect
            window.addEventListener('scroll', function() {
                if (window.scrollY > 50) {
                    header.classList.add('scrolled');
                } else {
                    header.classList.remove('scrolled');
                }
            });
            
            // Language dropdown
            if (languageBtn && languageDropdown) {
                languageBtn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    languageDropdown.classList.toggle('show');
                });
                
                document.addEventListener('click', function() {
                    languageDropdown.classList.remove('show');
                });
            }
            
            // Mobile menu
            if (mobileMenuToggle && mobileMenu) {
                mobileMenuToggle.addEventListener('click', function() {
                    this.classList.toggle('active');
                    mobileMenu.classList.toggle('show');
                    document.body.style.overflow = mobileMenu.classList.contains('show') ? 'hidden' : '';
                });
            }
            
            // Language selection
            let currentLang = localStorage.getItem('selectedLanguage') || 'en';
            updateCurrentLanguage(currentLang);
            
            languageOptions.forEach(option => {
                option.addEventListener('click', function(e) {
                    e.preventDefault();
                    const selectedLang = this.getAttribute('data-lang');
                    localStorage.setItem('selectedLanguage', selectedLang);
                    updateCurrentLanguage(selectedLang);
                    languageDropdown.classList.remove('show');
                    
                    // Close mobile menu if open
                    if (mobileMenu.classList.contains('show')) {
                        mobileMenuToggle.classList.remove('active');
                        mobileMenu.classList.remove('show');
                        document.body.style.overflow = '';
                    }
                });
            });
            
            function updateCurrentLanguage(lang) {
                const langMap = {
                    'en': 'EN',
                    'zh': '中文',
                    'ja': '日本'
                };
                
                if (currentLangSpan) {
                    currentLangSpan.textContent = langMap[lang] || 'EN';
                }
                
                languageOptions.forEach(opt => {
                    opt.classList.remove('active');
                    if (opt.getAttribute('data-lang') === lang) {
                        opt.classList.add('active');
                    }
                });
            }
        });

         $(function () {
          queryLanguageList();
        })

        //查询语言列表
        function queryLanguageList(){
            //获取选中的语言ID
            var languageId = localStorage.getItem('selectedLanguage');

            myajax({
              url: "/api/language/list",
              success: function (data) {
                var bodys = "";
                var bodys2 = "";
                data.forEach(function (item, index) {
                  var content = "";
                  bodys += "<a href='#' class='language-option' onclick='selectLanguage(" + item.id + ", this)'>";
                  content += "<img style='width: 18px; height: 12px; margin-right: 5px' src='/api/file/get?filename=" + item.languageFlag + "' alt=''>";
                  content += "<span>" + item.languageName + "</span>";
                  bodys += content;
                  bodys += "</a>";

                  bodys2 += "<a href='#' class='language-option' onclick='selectLanguage(" + item.id + ", this)'>" + item.languageName + "</a>";

                  if((languageId && languageId == item.id) || index == 0) {
                    $("#languageBtn").html(content);
                    //默认选中第一个
                    loadLanguageData(item.id);
                  }
                });

                //加入select
                $("#languageDropdown").html(bodys);
                $("#languageDropdown2").html(bodys2);
              }
            });
        }

        //选择语言
        function selectLanguage(id, ele){
          $("#languageBtn").html($(ele).html());

          //记录当前选择中的语言ID
          localStorage.setItem('selectedLanguage', id);

          loadLanguageData(id);
        }

        //检查是否在商品详情页
        function isProductDetailPage() {
          // 检查URL路径是否匹配商品详情页模式 /product/{id}
          const path = window.location.pathname;
          const productDetailPattern = /^\/product\/\d+$/;
          return productDetailPattern.test(path);
        }



        //请求相关语言数据
        function loadLanguageData(id) {
          //查询相关的常量列表
          myajax({
            url: "/api/sys/data/config/list",
            data: {
              languageId: id
            },
            success: (data) => {
              //存储数据
              saveData("langueages", data);

              //刷新页面
              loadPageData();
            }
          });
        }


        //刷新整个页面的占位符
        function loadPageData() {
          //获取语言数据
          var replacements = getAllData("langueages");
          console.log(replacements);

          // 获取所有元素
          const elements = document.querySelectorAll('*');

          elements.forEach(element => {
            // 检查当前元素是否包含 lg 属性
            if (element.hasAttribute('lg')) {
              const key = element.getAttribute('lg'); // 获取 lg 属性的值
              // 如果替换对象中存在对应的 key，则替换文本内容
              if (replacements[key]) {
                element.innerHTML = replacements[key];
              } else {
                element.innerHTML = "{{" + key + "}}";
              }
            }
          });
        }

        //检查并设置语言选择器状态
        function checkAndSetLanguageSelectorState() {
          if (isProductDetailPage()) {
            // 在商品详情页时隐藏语言选择器
            const languageSelector = document.querySelector('.language-selector');
            const mobileLanguage = document.querySelector('.mobile-language');

            if (languageSelector) {
              languageSelector.style.display = 'none';
            }

            if (mobileLanguage) {
              mobileLanguage.style.display = 'none';
            }

            console.log('语言选择器已在商品详情页隐藏');
          } else {
            // 在其他页面时确保语言选择器显示
            const languageSelector = document.querySelector('.language-selector');
            const mobileLanguage = document.querySelector('.mobile-language');

            if (languageSelector) {
              languageSelector.style.display = 'block';
            }

            if (mobileLanguage) {
              mobileLanguage.style.display = 'block';
            }
          }
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
          checkAndSetLanguageSelectorState();
        });
    </script>
    </div>
</body>
</html>
